<template>
  <!-- <input v-model="xxx" /> -->
  <el-autocomplete
    v-model="queryString"
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    clearable
    class="inline-input w-50"
    placeholder="查找一下"
    @select="selectEvent"
  />
  <!-- <span @click="getTableData" class="click">点击查找的你的票</span> -->
  <table>
    <!-- <tr>
      <td>{{ `${companyName}派息情况` }}</td>
    </tr> -->
    <tr>
      <th>派息时间</th>
      <th>每10股派息(税前，单位：元)</th>
      <th>每10股转增(单位：股)</th>
      <th>每10股送股(单位：股)</th>
      <th>当日价格</th>
      <th>收益率(税前)</th>
      <th>收益率(税后)</th>
    </tr>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.cdate }}</td>
      <td>{{ item.send }}</td>
      <td>{{ item.change }}</td>
      <td>{{ item.give }}</td>
      <td>{{ item.o }}</td>
      <td>{{ (parseFloat(item.send) / parseFloat(item.o) / 10 * 100).toFixed(2) }}</td>
      <td>{{ (parseFloat(item.send) / parseFloat(item.o) / 10 * 0.8 * 100).toFixed(2) }}</td>
    </tr>
  </table>
  <!-- <div class="wrapper">
    <div :class="['mm', ccll ]"></div>
    <div :class="['right', rrll]"></div>
  </div>
  <div class="tessss">
    <template v-for="item in [11,12,13,14,15,16,17,18,19]" :key="item + 100">
      <p class="mp">{{ xxx }}</p>
    </template>
  </div> -->
</template>
<script lang="ts" setup>
import { useStockStore } from '@/store'
import { GET_STOCK_DATA, GET_HISTORY_DATA } from "@/api/stock";
import { ref, getCurrentInstance, onMounted, ComponentInternalInstance } from "vue";
  
    // type tableData1 = {
    //   cdate: string,
    //   send: string,
    //   change: string,
    //   give: string,
    //   o: string
    // }
    type tableHistoryData1 = {
      d: string,
      o: string,
    }
    console.log(getCurrentInstance());
    
    const { appContext } = getCurrentInstance() as ComponentInternalInstance;
    const client = appContext?.config.globalProperties.$global.client;
    const companyName = ref<string>("");
    const xxx = ref<string>("601328");
    const queryString = ref<string>('')
    const ccll = ref<string>("");
    const rrll = ref<string>("");
    const tableData = ref([]);
    const tableHistoryData = ref<tableHistoryData1[]>([]);
    const stockStore = useStockStore();
    stockStore.getStock()
    console.log(stockStore.stock);

    const getStackData = () => new Promise((resolve, reject) => {
      return GET_STOCK_DATA(`/api11/hscp/jnfh/${xxx.value}/${client}`)
        .then((res: any) => {
          console.log('wwwwwww:', res);
          tableData.value = res;
          resolve(res)
        })
        .catch(err => {
          reject(err);
        })
    })
    const selectEvent = (item: any) => {
      xxx.value = item.dm
      getTableData()
    }
    // 获取历史数据
    const getHistoryData = () => {
      GET_HISTORY_DATA(`/api11/hszbl/fsjy/${xxx.value}/dn/${client}`)
        .then((res: any) => {
          tableHistoryData.value = res;
          tableData.value.forEach((element: any) => {
            element['o'] = res.find((el: { d: string; }) => el.d == element.cdate)?.o || '';
          });
        })
        .catch(err => {
          console.log(err);
        })
    }
    // 获取公司信息
    // const getCompanyInfo = () => {
    //   Axios.get(`/api11/hscp/gsjj/${xxx.value}/${client}`)
    //     .then(res => {
    //       console.log(res.data);
    //       companyName.value = res.data.name;
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     })
    // }
    const getTableData = () => {
      // getCompanyInfo();
      getStackData().then(() => {
        getHistoryData();
      })
    }
    const querySearch = (queryString: string, cb: any ) => {
      let result;
      if (queryString) {
        result = stockStore.stock.filter((el: any) => el.mc?.includes(queryString)).map((el: any) => ({
          value: el.mc,
          dm: el.dm
        }))
        let temp = stockStore.stock.filter((el: any) => el.dm?.includes(queryString)).map((el: any) => ({
          value: el.mc,
          dm: el.dm
        }))
        result = result.concat(temp)
      } else {
        result = stockStore.stock.map((el: any) => ({
          value: el.mc,
          dm: el.dm
        }))
      }
      cb(result)
    }
    onMounted(() => {
      getTableData()
      ccll.value = "tilt-in-left-2";
      rrll.value = "tilt-in-right-2";
    })
</script>
<style lang="less" scoped>
.tessss {
  width: 100%;
  height: 60vh;
  overflow: auto;
}

.click {
  cursor: pointer;
}

.mp {
  background-color: #eee;
  margin: 2vh;
  height: 15vh;
}

.mm {
  width: 29vw;
  height: 20vh;
  background-color: antiquewhite;
}

.right {
  width: 29vw;
  height: 20vh;
  background-color: antiquewhite;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around
}

.tilt-in-left-2 {
  -webkit-animation: tilt-in-left-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: tilt-in-left-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-left-2 {
  0% {
    -webkit-transform: rotateX(30deg) translateX(-300px) skewX(30deg);
    transform: rotateX(30deg) translateX(-300px) skewX(30deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes tilt-in-left-2 {
  0% {
    -webkit-transform: rotateX(30deg) translateX(-300px) skewX(30deg);
    transform: rotateX(30deg) translateX(-300px) skewX(30deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}

.tilt-in-right-2 {
  -webkit-animation: tilt-in-right-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: tilt-in-right-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-right-2 {
  0% {
    -webkit-transform: rotateX(30deg) translateX(300px) skewX(-30deg);
    transform: rotateX(30deg) translateX(300px) skewX(-30deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes tilt-in-right-2 {
  0% {
    -webkit-transform: rotateX(30deg) translateX(300px) skewX(-30deg);
    transform: rotateX(30deg) translateX(300px) skewX(-30deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}
</style>